<template>
    <div>
        <el-form :model="regionForm"  :rules="rules" ref="regionForm" label-width="100px" style="width:460px">
            <el-form-item label="所属市场：" prop="marketId">
				<el-select v-model="regionForm.marketId" placeholder="请选择市场">
					<el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="区域名称：" prop="regionName">
                    <el-input v-model="regionForm.regionName" clearable placeholder="请输入区域名称"></el-input>
            </el-form-item>
            <el-form-item label="租赁类型：" prop="regionType">
              <el-radio-group v-model="regionForm.regionType">
                <el-radio-button :label="1">按面积</el-radio-button>
                <el-radio-button :label="2">按车位</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="areaName"  prop="regionNum">
                <el-input v-model="regionForm.regionNum"  clearable placeholder="请输入区域面积">
                    <template slot="append">{{areaUnit}}</template>
                </el-input>
            </el-form-item>
             <el-form-item label="区域租金：" prop="regionRentFee">
              <el-input v-model="regionForm.regionRentFee" clearable placeholder="请输入区域租金">
                  <template slot="append">{{feeUnit}}</template>
              </el-input>
            </el-form-item>
            <el-form-item label="地理位置：" prop="regionRemark">
                    <el-input v-model="regionForm.regionRemark" clearable placeholder="请输入地理位置"></el-input>
            </el-form-item>
           <el-form-item>
                <el-button type="primary" @click="onSubmit('regionForm')">{{buttonName}}</el-button>
                <el-button @click="turnToList">返回列表</el-button>
                <el-button @click="resetForm('regionForm')" v-if="!regionId">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
          num:0,
          buttonName:'',
          regionId: this.$route.params.id,
          areaName: '区域面积：',
          areaUnit: '平米',
          feeUnit: '元/平米/月',
          regionForm:{
             regionName: '',
             regionType: 1,
             regionNum: '',
             regionRentFee: '',
             regionRemark: '',
             regionState: 1,
             regionParentId: 1,
             regionRestNum: ''
          },
          store:{
            marketOptions:[],
            params:{
                pageSize:10,
                pageIndex:1,
                marketId:this.$marketId,
            },
          },
           rules: {
            marketId: [
                { required: true, message: '请选择市场', trigger: 'blur' },
            ],
            regionName: [
                { required: true, message: '请输入区域名称', trigger: 'change' }
            ],
            regionNum: [
                { required: true, message: '请输入数量', trigger: 'blur' },
            ],
            regionRentFee: [
                { required: true, message: '请输入月租金', trigger: 'blur' },
            ],
        }
        };
    },
     watch:{
        '$route'(){
            if (!this.$route.params.id){
                this.resetForm('regionForm')
                this.buttonName = '立即创建'
            }
        },
        'regionForm.regionType'(){
            if (this.regionForm.regionType == 1){
                this.areaName = '区域面积：',
                this.areaUnit = '平米',
                this.feeUnit = '元/平米/月'
            }else{
                this.areaName = '车位数量：',
                this.areaUnit = '个',
                this.feeUnit = '元/个/月'
            }
        },
        'regionForm.regionNum'(){
            if (this.regionForm.regionNum != null){
                this.regionForm.regionRestNum = this.regionForm.regionNum
            }
        }
    },

    created(){
       this.$store.commit('getMarketOptions',this.store)
    },
    mounted () {
        console.log(this, '11111111111111111');

    },
    methods: {
        getData(){
           this.$axios.get(this.$api.getRegionList,
                { params: {regionId: this.regionId, marketId: this.$marketId}}).then((res) => {
                    let regionForm = res.data.result[0]
                    delete  regionForm.market;
                    delete  regionForm.regionCreateTime;
                    this.regionForm = regionForm
                })
        },
        turnToList(){
            this.$router.push('/region/regionList')
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
             if(valid){
                var requestParam = this.regionForm
                var formData = new FormData();
                for(let i in requestParam){
                formData.append(i,requestParam[i])
                }
                this.$axios({
                    method: 'post',
                    url: this.$api.insertOrUpdateRegion,
                    data: formData
                    }).then((res) => {
                    if (res.data.code == 1){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.$router.push('/region/regionList')
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                        this.$router.push('/region/regionForm')
                    }
                })
            }else{
                console.log('提交有问题请查看');
                return false;
            }
          });
        },
    },
    activated() {
        this.regionId = this.$route.params.id;
        if (this.regionId != null){
             this.getData();
            this.buttonName = "立即更新"
        }else{
            this.buttonName = "立即创建"
        }
    },
    deactivated() {

    }
}
</script>
